/******/ (function() { // webpackBootstrap
/******/ 	var __webpack_modules__ = ({

/***/ 393:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(81);
/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(645);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
// Imports


var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
// Module
___CSS_LOADER_EXPORT___.push([module.id, ".preview-wrap[data-v-00796f98]{position:fixed;top:0;left:0;z-index:99999;background:rgba(0,0,0,.9)}.preview-wrap *[data-v-00796f98]{-webkit-user-select:none;-moz-user-select:none;user-select:none}.preview-wrap li[data-v-00796f98]{list-style:none}.preview-wrap .preview[data-v-00796f98]{position:relative;display:flex;align-items:center;justify-content:center;width:100vw;height:100vh}.preview-wrap .preview-content[data-v-00796f98]{position:relative;cursor:move;transition:transform .2s;max-height:100vh}.preview-wrap .preview-footer[data-v-00796f98]{position:absolute;bottom:20px;left:50%;transform:translateX(-50%)}.preview-wrap .preview-footer-tools[data-v-00796f98]{display:flex;justify-content:center}.preview-wrap .preview-footer-tools li[data-v-00796f98]{margin-right:10px;padding:10px;border-radius:50%;background:hsla(0,0%,43%,.7);cursor:pointer}.preview-wrap .preview-footer-tools li>img[data-v-00796f98]{display:block;width:30px;height:30px}.preview-wrap .preview-footer-tools li:hover i[data-v-00796f98]{color:#ef544e}.preview-wrap .preview-footer-thumbs[data-v-00796f98]{margin-top:20px;max-width:700px;overflow-x:auto;white-space:nowrap}.preview-wrap .preview-footer-thumbs .thumb-item[data-v-00796f98]{padding:5px;margin-right:5px;display:inline-block;background:hsla(0,0%,40%,.7);border-radius:5px;cursor:pointer}.preview-wrap .preview-footer-thumbs .thumb-item img[data-v-00796f98]{width:60px;height:60px;-o-object-fit:cover;object-fit:cover;vertical-align:middle}.preview-wrap .preview-footer-thumbs .thumb-item.active[data-v-00796f98]{background:rgba(239,84,78,.7)}.preview-wrap .preview-footer-thumbs[data-v-00796f98]::-webkit-scrollbar{height:10px}.preview-wrap .preview-footer-thumbs[data-v-00796f98]::-webkit-scrollbar-thumb{border-radius:10px;box-shadow:inset 0 0 5px rgba(0,0,0,.2);background:#d2d2d2;cursor:pointer}.preview-wrap .preview-footer-thumbs[data-v-00796f98]::-webkit-scrollbar-track{border-radius:10px;background:#fff}.preview-wrap .preview .close-icon[data-v-00796f98]{padding:10px;position:absolute;top:30px;right:30px;border-radius:50%;background:hsla(0,0%,43%,.7);cursor:pointer}.preview-wrap .preview .close-icon>img[data-v-00796f98]{display:block;width:30px;height:30px}", ""]);
// Exports
/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);


/***/ }),

/***/ 645:
/***/ (function(module) {

"use strict";


/*
  MIT License http://www.opensource.org/licenses/mit-license.php
  Author Tobias Koppers @sokra
*/
module.exports = function (cssWithMappingToString) {
  var list = [];

  // return the list of modules as css string
  list.toString = function toString() {
    return this.map(function (item) {
      var content = "";
      var needLayer = typeof item[5] !== "undefined";
      if (item[4]) {
        content += "@supports (".concat(item[4], ") {");
      }
      if (item[2]) {
        content += "@media ".concat(item[2], " {");
      }
      if (needLayer) {
        content += "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {");
      }
      content += cssWithMappingToString(item);
      if (needLayer) {
        content += "}";
      }
      if (item[2]) {
        content += "}";
      }
      if (item[4]) {
        content += "}";
      }
      return content;
    }).join("");
  };

  // import a list of modules into the list
  list.i = function i(modules, media, dedupe, supports, layer) {
    if (typeof modules === "string") {
      modules = [[null, modules, undefined]];
    }
    var alreadyImportedModules = {};
    if (dedupe) {
      for (var k = 0; k < this.length; k++) {
        var id = this[k][0];
        if (id != null) {
          alreadyImportedModules[id] = true;
        }
      }
    }
    for (var _k = 0; _k < modules.length; _k++) {
      var item = [].concat(modules[_k]);
      if (dedupe && alreadyImportedModules[item[0]]) {
        continue;
      }
      if (typeof layer !== "undefined") {
        if (typeof item[5] === "undefined") {
          item[5] = layer;
        } else {
          item[1] = "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {").concat(item[1], "}");
          item[5] = layer;
        }
      }
      if (media) {
        if (!item[2]) {
          item[2] = media;
        } else {
          item[1] = "@media ".concat(item[2], " {").concat(item[1], "}");
          item[2] = media;
        }
      }
      if (supports) {
        if (!item[4]) {
          item[4] = "".concat(supports);
        } else {
          item[1] = "@supports (".concat(item[4], ") {").concat(item[1], "}");
          item[4] = supports;
        }
      }
      list.push(item);
    }
  };
  return list;
};

/***/ }),

/***/ 81:
/***/ (function(module) {

"use strict";


module.exports = function (i) {
  return i[1];
};

/***/ }),

/***/ 89:
/***/ (function(__unused_webpack_module, exports) {

"use strict";
var __webpack_unused_export__;


__webpack_unused_export__ = ({
  value: true
});
// runtime helper for setting properties on components
// in a tree-shakable way
exports.Z = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};

/***/ }),

/***/ 963:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {

// style-loader: Adds some css to the DOM by adding a <style> tag

// load the styles
var content = __webpack_require__(393);
if(content.__esModule) content = content.default;
if(typeof content === 'string') content = [[module.id, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var add = (__webpack_require__(37)/* ["default"] */ .Z)
var update = add("48275838", content, true, {"sourceMap":false,"shadowMode":false});

/***/ }),

/***/ 37:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {

"use strict";

// EXPORTS
__webpack_require__.d(__webpack_exports__, {
  "Z": function() { return /* binding */ addStylesClient; }
});

;// CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/listToStyles.js
/**
 * Translates the list format produced by css-loader into something
 * easier to manipulate.
 */
function listToStyles(parentId, list) {
  var styles = [];
  var newStyles = {};
  for (var i = 0; i < list.length; i++) {
    var item = list[i];
    var id = item[0];
    var css = item[1];
    var media = item[2];
    var sourceMap = item[3];
    var part = {
      id: parentId + ':' + i,
      css: css,
      media: media,
      sourceMap: sourceMap
    };
    if (!newStyles[id]) {
      styles.push(newStyles[id] = {
        id: id,
        parts: [part]
      });
    } else {
      newStyles[id].parts.push(part);
    }
  }
  return styles;
}
;// CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/addStylesClient.js
/*
  MIT License http://www.opensource.org/licenses/mit-license.php
  Author Tobias Koppers @sokra
  Modified by Evan You @yyx990803
*/



var hasDocument = typeof document !== 'undefined'

if (typeof DEBUG !== 'undefined' && DEBUG) {
  if (!hasDocument) {
    throw new Error(
    'vue-style-loader cannot be used in a non-browser environment. ' +
    "Use { target: 'node' } in your Webpack config to indicate a server-rendering environment."
  ) }
}

/*
type StyleObject = {
  id: number;
  parts: Array<StyleObjectPart>
}

type StyleObjectPart = {
  css: string;
  media: string;
  sourceMap: ?string
}
*/

var stylesInDom = {/*
  [id: number]: {
    id: number,
    refs: number,
    parts: Array<(obj?: StyleObjectPart) => void>
  }
*/}

var head = hasDocument && (document.head || document.getElementsByTagName('head')[0])
var singletonElement = null
var singletonCounter = 0
var isProduction = false
var noop = function () {}
var options = null
var ssrIdKey = 'data-vue-ssr-id'

// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
// tags it will allow on a page
var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase())

function addStylesClient (parentId, list, _isProduction, _options) {
  isProduction = _isProduction

  options = _options || {}

  var styles = listToStyles(parentId, list)
  addStylesToDom(styles)

  return function update (newList) {
    var mayRemove = []
    for (var i = 0; i < styles.length; i++) {
      var item = styles[i]
      var domStyle = stylesInDom[item.id]
      domStyle.refs--
      mayRemove.push(domStyle)
    }
    if (newList) {
      styles = listToStyles(parentId, newList)
      addStylesToDom(styles)
    } else {
      styles = []
    }
    for (var i = 0; i < mayRemove.length; i++) {
      var domStyle = mayRemove[i]
      if (domStyle.refs === 0) {
        for (var j = 0; j < domStyle.parts.length; j++) {
          domStyle.parts[j]()
        }
        delete stylesInDom[domStyle.id]
      }
    }
  }
}

function addStylesToDom (styles /* Array<StyleObject> */) {
  for (var i = 0; i < styles.length; i++) {
    var item = styles[i]
    var domStyle = stylesInDom[item.id]
    if (domStyle) {
      domStyle.refs++
      for (var j = 0; j < domStyle.parts.length; j++) {
        domStyle.parts[j](item.parts[j])
      }
      for (; j < item.parts.length; j++) {
        domStyle.parts.push(addStyle(item.parts[j]))
      }
      if (domStyle.parts.length > item.parts.length) {
        domStyle.parts.length = item.parts.length
      }
    } else {
      var parts = []
      for (var j = 0; j < item.parts.length; j++) {
        parts.push(addStyle(item.parts[j]))
      }
      stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }
    }
  }
}

function createStyleElement () {
  var styleElement = document.createElement('style')
  styleElement.type = 'text/css'
  head.appendChild(styleElement)
  return styleElement
}

function addStyle (obj /* StyleObjectPart */) {
  var update, remove
  var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')

  if (styleElement) {
    if (isProduction) {
      // has SSR styles and in production mode.
      // simply do nothing.
      return noop
    } else {
      // has SSR styles but in dev mode.
      // for some reason Chrome can't handle source map in server-rendered
      // style tags - source maps in <style> only works if the style tag is
      // created and inserted dynamically. So we remove the server rendered
      // styles and inject new ones.
      styleElement.parentNode.removeChild(styleElement)
    }
  }

  if (isOldIE) {
    // use singleton mode for IE9.
    var styleIndex = singletonCounter++
    styleElement = singletonElement || (singletonElement = createStyleElement())
    update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)
    remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)
  } else {
    // use multi-style-tag mode in all other cases
    styleElement = createStyleElement()
    update = applyToTag.bind(null, styleElement)
    remove = function () {
      styleElement.parentNode.removeChild(styleElement)
    }
  }

  update(obj)

  return function updateStyle (newObj /* StyleObjectPart */) {
    if (newObj) {
      if (newObj.css === obj.css &&
          newObj.media === obj.media &&
          newObj.sourceMap === obj.sourceMap) {
        return
      }
      update(obj = newObj)
    } else {
      remove()
    }
  }
}

var replaceText = (function () {
  var textStore = []

  return function (index, replacement) {
    textStore[index] = replacement
    return textStore.filter(Boolean).join('\n')
  }
})()

function applyToSingletonTag (styleElement, index, remove, obj) {
  var css = remove ? '' : obj.css

  if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = replaceText(index, css)
  } else {
    var cssNode = document.createTextNode(css)
    var childNodes = styleElement.childNodes
    if (childNodes[index]) styleElement.removeChild(childNodes[index])
    if (childNodes.length) {
      styleElement.insertBefore(cssNode, childNodes[index])
    } else {
      styleElement.appendChild(cssNode)
    }
  }
}

function applyToTag (styleElement, obj) {
  var css = obj.css
  var media = obj.media
  var sourceMap = obj.sourceMap

  if (media) {
    styleElement.setAttribute('media', media)
  }
  if (options.ssrId) {
    styleElement.setAttribute(ssrIdKey, obj.id)
  }

  if (sourceMap) {
    // https://developer.chrome.com/devtools/docs/javascript-debugging
    // this makes source maps inside style tags work properly in Chrome
    css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */'
    // http://stackoverflow.com/a/26603875
    css += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'
  }

  if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = css
  } else {
    while (styleElement.firstChild) {
      styleElement.removeChild(styleElement.firstChild)
    }
    styleElement.appendChild(document.createTextNode(css))
  }
}


/***/ })

/******/ 	});
/************************************************************************/
/******/ 	// The module cache
/******/ 	var __webpack_module_cache__ = {};
/******/ 	
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/ 		// Check if module is in cache
/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
/******/ 		if (cachedModule !== undefined) {
/******/ 			return cachedModule.exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = __webpack_module_cache__[moduleId] = {
/******/ 			id: moduleId,
/******/ 			// no module.loaded needed
/******/ 			exports: {}
/******/ 		};
/******/ 	
/******/ 		// Execute the module function
/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/ 	
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/ 	
/************************************************************************/
/******/ 	/* webpack/runtime/compat get default export */
/******/ 	!function() {
/******/ 		// getDefaultExport function for compatibility with non-harmony modules
/******/ 		__webpack_require__.n = function(module) {
/******/ 			var getter = module && module.__esModule ?
/******/ 				function() { return module['default']; } :
/******/ 				function() { return module; };
/******/ 			__webpack_require__.d(getter, { a: getter });
/******/ 			return getter;
/******/ 		};
/******/ 	}();
/******/ 	
/******/ 	/* webpack/runtime/define property getters */
/******/ 	!function() {
/******/ 		// define getter functions for harmony exports
/******/ 		__webpack_require__.d = function(exports, definition) {
/******/ 			for(var key in definition) {
/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ 				}
/******/ 			}
/******/ 		};
/******/ 	}();
/******/ 	
/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
/******/ 	!function() {
/******/ 		__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ 	}();
/******/ 	
/******/ 	/* webpack/runtime/make namespace object */
/******/ 	!function() {
/******/ 		// define __esModule on exports
/******/ 		__webpack_require__.r = function(exports) {
/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 			}
/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
/******/ 		};
/******/ 	}();
/******/ 	
/******/ 	/* webpack/runtime/publicPath */
/******/ 	!function() {
/******/ 		__webpack_require__.p = "";
/******/ 	}();
/******/ 	
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be in strict mode.
!function() {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);

// EXPORTS
__webpack_require__.d(__webpack_exports__, {
  "closePreview": function() { return /* reexport */ closePreview; },
  "default": function() { return /* binding */ entry_lib; },
  "preview": function() { return /* reexport */ preview; }
});

;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
/* eslint-disable no-var */
// This file is imported into lib/wc client bundles.

if (typeof window !== 'undefined') {
  var currentScript = window.document.currentScript
  if (false) { var getCurrentScript; }

  var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
  if (src) {
    __webpack_require__.p = src[1] // eslint-disable-line
  }
}

// Indicate to webpack that this file can be concatenated
/* harmony default export */ var setPublicPath = (null);

;// CONCATENATED MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
var external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
;// CONCATENATED MODULE: ./src/assets/arrow-left.png
var arrow_left_namespaceObject = "";
;// CONCATENATED MODULE: ./src/assets/refresh-left.png
var refresh_left_namespaceObject = "";
;// CONCATENATED MODULE: ./src/assets/real-size.png
var real_size_namespaceObject = "";
;// CONCATENATED MODULE: ./src/assets/refresh-right.png
var refresh_right_namespaceObject = "";
;// CONCATENATED MODULE: ./src/assets/arrow-right.png
var arrow_right_namespaceObject = "";
;// CONCATENATED MODULE: ./src/assets/close.png
var close_namespaceObject = "";
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./packages/index.vue?vue&type=template&id=00796f98&scoped=true







const _withScopeId = n => ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.pushScopeId)("data-v-00796f98"), n = n(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.popScopeId)(), n);
const _hoisted_1 = ["src"];
const _hoisted_2 = {
  class: "preview-footer-tools"
};
const _hoisted_3 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
  src: arrow_left_namespaceObject,
  alt: ""
}, null, -1));
const _hoisted_4 = [_hoisted_3];
const _hoisted_5 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
  src: refresh_left_namespaceObject,
  alt: ""
}, null, -1));
const _hoisted_6 = [_hoisted_5];
const _hoisted_7 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
  src: real_size_namespaceObject,
  alt: ""
}, null, -1));
const _hoisted_8 = [_hoisted_7];
const _hoisted_9 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
  src: refresh_right_namespaceObject,
  alt: ""
}, null, -1));
const _hoisted_10 = [_hoisted_9];
const _hoisted_11 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
  src: arrow_right_namespaceObject,
  alt: ""
}, null, -1));
const _hoisted_12 = [_hoisted_11];
const _hoisted_13 = {
  key: 0,
  class: "preview-footer-thumbs"
};
const _hoisted_14 = ["id", "onClick"];
const _hoisted_15 = ["src"];
const _hoisted_16 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", {
  class: "close-icon"
}, [/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
  src: close_namespaceObject,
  alt: ""
})], -1));
function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
    class: "preview-wrap",
    onMousewheel: _cache[9] || (_cache[9] = (...args) => $options.handerMousewheel && $options.handerMousewheel(...args))
  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
    class: "preview",
    onClick: _cache[8] || (_cache[8] = (...args) => $options.closePreview && $options.closePreview(...args))
  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
    class: "preview-content",
    src: $data.currentImg,
    style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
      top: $data.imgTop + 'px',
      left: $data.imgLeft + 'px',
      transform: `scale(${$data.imgScale}) rotateZ(${$data.imgRotate}deg)`
    }),
    onClick: _cache[0] || (_cache[0] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)((...args) => $options.preventDefault && $options.preventDefault(...args), ["stop"])),
    onMousedown: _cache[1] || (_cache[1] = (...args) => $options.handleMoveStart && $options.handleMoveStart(...args))
  }, null, 44, _hoisted_1), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
    class: "preview-footer",
    onClick: _cache[7] || (_cache[7] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)((...args) => $options.preventDefault && $options.preventDefault(...args), ["stop"]))
  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("ul", _hoisted_2, [$data.imgList.length ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("li", {
    key: 0,
    onClick: _cache[2] || (_cache[2] = $event => $options.handleCut('last'))
  }, _hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("li", {
    onClick: _cache[3] || (_cache[3] = $event => $options.handleRotate('left'))
  }, _hoisted_6), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("li", {
    onClick: _cache[4] || (_cache[4] = $event => $data.imgScale = 1)
  }, _hoisted_8), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("li", {
    onClick: _cache[5] || (_cache[5] = $event => $options.handleRotate('right'))
  }, _hoisted_10), $data.imgList.length ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("li", {
    key: 1,
    onClick: _cache[6] || (_cache[6] = $event => $options.handleCut('next'))
  }, _hoisted_12)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]), $data.imgList.length ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", _hoisted_13, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($data.imgList, (item, index) => {
    return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
      id: 'thumb-item-' + index,
      key: index,
      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["thumb-item", {
        active: $data.currentImg === ($data.imgKey ? item[$data.imgKey] : item)
      }]),
      onClick: $event => $options.handleClickThumb(item, index)
    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
      src: $data.imgKey ? item[$data.imgKey] : item
    }, null, 8, _hoisted_15)], 10, _hoisted_14);
  }), 128))])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]), _hoisted_16])], 32);
}
;// CONCATENATED MODULE: ./packages/index.vue?vue&type=template&id=00796f98&scoped=true

;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./packages/index.vue?vue&type=script&lang=js

/* harmony default export */ var dist_ruleSet_0_use_0_packagesvue_type_script_lang_js = ({
  name: 'wd-preview',
  data() {
    return {
      currentImg: '',
      // 当前预览图片的url
      imgList: [],
      // 需要预览的图片数组
      imgKey: '',
      // 图片所在的数据的key
      imgTop: 0,
      // 图片定位置top
      imgLeft: 0,
      // 图片定位置left
      startPageX: 0,
      // 按下鼠标时当前鼠标所在位置x
      startPageY: 0,
      // 按下鼠标时当前鼠标所在位置y
      imgScale: 1,
      // 图片缩放
      imgRotate: 0 // 图片旋转
    };
  },

  watch: {
    currentImg() {
      this.imgTop = 0;
      this.imgLeft = 0;
      this.imgScale = 1;
      this.imgRotate = 0;
    }
  },
  methods: {
    closePreview() {
      closePreview();
    },
    // 关闭时重置值
    reset() {
      this.imgList = [];
      this.currentImg = '';
      this.imgKey = '';
      this.imgTop = 0;
      this.imgLeft = 0;
      this.startPageX = 0;
      this.startPageY = 0;
      this.imgScale = 1;
      this.imgRotate = 0;
    },
    // 旋转
    handleRotate(type) {
      if (type === 'left') {
        this.imgRotate -= 90;
      } else {
        this.imgRotate += 90;
      }
    },
    // 切换上一张或者下一张
    handleCut(type) {
      if (this.imgList.length < 2) return;
      const currentIndex = this.imgList.findIndex(item => {
        const url = this.imgKey ? item[this.imgKey] : item;
        return url === this.currentImg;
      });
      let targetIndex = null;
      if (type === 'last') {
        if (currentIndex === 0) {
          targetIndex = this.imgList.length - 1;
        } else {
          targetIndex = currentIndex - 1;
        }
      }
      if (type === 'next') {
        if (currentIndex === this.imgList.length - 1) {
          targetIndex = 0;
        } else {
          targetIndex = currentIndex + 1;
        }
      }
      const targetItem = this.imgList[targetIndex];
      this.currentImg = this.imgKey ? targetItem[this.imgKey] : targetItem;
      this.handleXScroll(targetIndex);
    },
    // 使滚动条滚动到当前预览的那一张
    handleXScroll(index) {
      index = index < 4 ? 0 : index - 4;
      const imgParentElement = document.querySelector('.preview-footer-thumbs');
      const imgWrapElement = document.querySelector('#thumb-item-' + index);
      imgParentElement.scrollLeft = imgWrapElement.offsetLeft;
    },
    // 点击缩略图切换当前预览
    handleClickThumb(item, index) {
      const url = this.imgKey ? item[this.imgKey] : item;
      this.currentImg = url;
      this.handleXScroll(index);
    },
    // 鼠标滚轮缩放图片
    handerMousewheel(e) {
      // 火狐浏览器为e.detail 其他浏览器均为e.wheelDelta
      if ((e.wheelDelta > 0 || e.detail > 0) && this.imgScale < 4) {
        this.imgScale += 0.1;
      } else if ((e.wheelDelta < 0 || e.detail < 0) && this.imgScale > 0.5) {
        this.imgScale += -0.1;
      }
    },
    // 按下鼠标开始移动图片
    handleMoveStart(e) {
      const {
        pageX,
        pageY
      } = e;
      this.startPageX = pageX - this.imgLeft;
      this.startPageY = pageY - this.imgTop;
      document.addEventListener('mousemove', this.handleMore, false);
      document.addEventListener('mouseup', this.clearEvent, false);
      e.preventDefault();
    },
    // 移除事件
    clearEvent() {
      document.removeEventListener('mousemove', this.handleMore, false);
    },
    // 按住鼠标移动时的处理
    handleMore(e) {
      const {
        pageX,
        pageY
      } = e;
      this.imgTop = pageY - this.startPageY;
      this.imgLeft = pageX - this.startPageX;
      e.preventDefault();
    },
    // 阻止默认行为
    preventDefault(e) {
      e.preventDefault();
    }
  }
});
;// CONCATENATED MODULE: ./packages/index.vue?vue&type=script&lang=js
 
// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./packages/index.vue?vue&type=style&index=0&id=00796f98&lang=scss&scoped=true
var dist_ruleSet_0_use_0_packagesvue_type_style_index_0_id_00796f98_lang_scss_scoped_true = __webpack_require__(963);
;// CONCATENATED MODULE: ./packages/index.vue?vue&type=style&index=0&id=00796f98&lang=scss&scoped=true

// EXTERNAL MODULE: ./node_modules/vue-loader/dist/exportHelper.js
var exportHelper = __webpack_require__(89);
;// CONCATENATED MODULE: ./packages/index.vue




;


const __exports__ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dist_ruleSet_0_use_0_packagesvue_type_script_lang_js, [['render',render],['__scopeId',"data-v-00796f98"]])

/* harmony default export */ var packages_0 = (__exports__);
;// CONCATENATED MODULE: ./packages/index.js


let state = null; // 预览组件内部的状态数据
let previewBox = null;
let previewApp = null;
/**
 * 通过use调用时挂载到vue实例
 * @param {Object} App
 */
function install(App) {
  App.config.globalProperties.$preview = preview;
}
/**
 * @param {String|Number} current 当前预览的图片索引或者url
 * @param {Array} list 需要预览的图片数组 非必传 如果不传的话 current必须为url 不能为索引
 * @param {String} key 如果list里面的item是图片的url 则不需要，如果是对象的话，需传图片的在对象中的key。
 */
function preview(current = '', list = [], key = '') {
  if (state === null) {
    initialize();
  }
  if (current === '' || current === null || current === undefined) {
    throw 'Vue3PreviewImage：请传入参数';
  } else if (typeof current === 'number') {
    if (!list || !list.length) {
      throw 'Vue3PreviewImage：参数错误，第一个参数为索引时，请在第二个参数中传入数组';
    }
    state.currentImg = key ? list[current][key] : list[current];
  } else {
    state.currentImg = current;
    if (!list.length) {
      state.imgList = [current];
    }
  }
  state.imgList = list;
  state.imgKey = key;
}
function closePreview() {
  if (previewApp !== null) {
    previewApp.unmount();
    previewApp._container.innerHTML = '';
    previewBox && document.body.removeChild(previewBox);
    state = null;
    previewBox = null;
    previewApp = null;
  }
}

/**
 * 初始化
 */
function initialize() {
  const instance = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createApp)(packages_0);
  const box = document.createElement('div');
  previewBox = box;
  document.body.appendChild(box);
  state = instance.mount(box);
  previewApp = instance;
}
;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js


/* harmony default export */ var entry_lib = (install);


}();
module.exports = __webpack_exports__;
/******/ })()
;